<template>
    <div id="login">

        <div class="loginbox">
            <br>
            <el-row style="display: flex;align-items: center">
                <el-col :span="4">用户名:</el-col>
                <el-col :span=20>

                    <el-input placeholder="请输入用户名" v-model="user" prefix-icon="el-icon-user">
                    </el-input>
                </el-col>
            </el-row>
            <el-row style="display: flex;align-items: center">
                <br>
                <el-col :span="4">密码:</el-col>
                <el-col :span=20>

                    <el-input placeholder="请输入密码" v-model="pwd" prefix-icon="el-icon-key" show-password>
                    </el-input>
                </el-col>
            </el-row>
            <el-row style="display: flex;align-items: center" >
                <br>
                <el-col :span=12 :offset="8">
                    <canvas id="canvas" width="150" height="50"  @click="draw()"></canvas>
                </el-col>

                <el-col :span="4" >点击更换</el-col>
            </el-row>
            <el-row style="display: flex;align-items: center">
                <el-col :span="4">验证码:</el-col>
                <el-col :span=20>
                    <el-input placeholder="请输入验证码" v-model="verification_code" prefix-icon="el-icon-picture" >
                    </el-input>
                </el-col>

            </el-row>
            <br>
            <el-button  type="primary" @click="login">登录</el-button>

        </div>
    </div>
</template>

<script>
    import {
        klogin
    } from "../../network/login";

    export default {
        name: "login",
        data(){
            return {
                user: '',
                pwd: '',
                verification_code:'',
                show_num:[]
            }
        },
        mounted() {
            this.draw(this.show_num)
        },
        methods:{
            login(){

                if(this.user == ''){
                    this.$message.error("用户名不能为空")
                    return
                }
                if(this.pwd == ''){
                    this.$message.error("密码不能为空")
                    return
                }
                let lowerCode = this.verification_code.toLowerCase()
                if(lowerCode.length != this.show_num.length){
                    this.$message({
                        message:"验证码错误!",
                        type:"error",

                    })

                    return
                }
                let codeCorrect = true
                for(let i=0;i<lowerCode.length;i++) {
                    if(lowerCode.charAt(i)!=this.show_num[i]) {
                        codeCorrect = false
                        break
                    }
                }
                if(!codeCorrect){
                    this.$message.error("验证码错误")
                    return
                }
                klogin(this.user,this.pwd).then(res=>{
                    const user_success = res.data;
                    if(res.data !=null){
                        this.$message({
                            message:'用户'+user_success+'登录成功',
                            type:'success'
                        })

                        this.$store.commit("changeUser",res.data)

                        this.$router.replace('/yuqing/1')

                    }
                    else{
                        this.$message({
                            message:"用户名密码错误！",
                            type:"error"
                        })
                    }
                })
            },
            draw() {
                this.show_num = []
                var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
                var canvas_height = canvas.clientHeight;
                var canvas_width = canvas.clientWidth;
                var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var aCode = sCode.split(",");
                var aLength = aCode.length;//获取到数组的长度

                for (let i = 0; i < 4; i++) {  //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                    var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                    // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                    var deg = Math.random() - 0.5; //产生一个随机弧度
                    var txt = aCode[j];//得到随机的一个内容
                    this.show_num[i] = txt.toLowerCase();
                    let x = 10 + i * 35;//文字在canvas上的x坐标
                    let y = 20 + Math.random() * 10;//文字在canvas上的y坐标
                    context.font = "bold 23px 微软雅黑";

                    context.translate(x, y);
                    context.rotate(deg);

                    context.fillStyle = this.randomColor();
                    context.fillText(txt, 0, 0);

                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (let i = 0; i <= 5; i++) { //验证码上显示线条
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.stroke();
                }
                for (let i = 0; i <= 30; i++) { //验证码上显示小点
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    let x = Math.random() * canvas_width;
                    let y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            },
            randomColor() {
                let r = Math.floor(Math.random() * 256);//Math.random() 返回0.0 ~ 1.0 之间的一个伪随机数。floor() 方法可对一个数进行下舍入。
                let g = Math.floor(Math.random() * 256);
                let b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }

        }
    }
</script>

<style scoped>



    #login {
        position: absolute;
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-image: url('~../../assets/img/lgbg.jpg');
    }
    .loginbox {
        position: relative;
        width: 35%;
        height: 45%;
        opacity: 0.9;
        border-radius: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        font-family: FangSong;
        color: white;
    }

    .el-message{
        font-size:0.01rem !important;
    }

    #canvas{

        background-color: white;
    }

    .el-row{
        margin-bottom: 20px;
    }

</style>